<script lang="ts" setup>
import { ClassChangeApi } from '@/apis'
import { useTable } from '@/hooks/modules/useTable'
import { useForm } from '@/hooks'
import ChangeList from '@/views/education/change/ChangeList.vue'

defineOptions({
  name: 'ClassChangeRecord',
})

const router = useRouter()
const { form } = useForm<ClassChangeApi.ChangeRecordQuery>({
  studentId: undefined,
  grade: undefined,
  originalClassId: undefined,
  targetClassId: undefined,
  changeType: 'CHANGE_CLASS',
  operateSource: undefined,
  operateStatus: undefined,
  createDateFrom: undefined,
  createDateTo: undefined,
})

const {
  tableData: records,
  loading,
  pagination,
  search,
} = useTable(pagination => ClassChangeApi.getChangePage({ ...form, ...pagination }))

const filterCollapsed = ref(true)

const onCreate = () => {
  router.push({ path: '/education/class/change/create' })
}

watch(form, () => search(), { immediate: true, deep: true })
</script>

<template>
  <ProPage title="调转记录" description="转班调课记录">
    <template #extra>
      <a-button v-permission="['edu:class-change:manage']" type="primary" @click="onCreate">
        <template #icon>
          <icon-plus />
        </template>
        转班调课
      </a-button>
    </template>
    <a-space direction="vertical" size="small" class="mb">
      <a-space>
        <label class="label">学生</label>
        <StudentSelect v-model="form.studentId" class="!w-300px" />
        <CollapseButton v-model="filterCollapsed" />
      </a-space>
      <a-space v-show="filterCollapsed" direction="vertical" size="medium">
        <a-space>
          <label class="label">其他条件</label>
          <ClassSelect v-model="form.originalClassId" placeholder="转出班级" class="!min-w-300px" />
          <ClassSelect v-model="form.targetClassId" placeholder="转入班级" class="!min-w-300px" />
          <RangePicker v-model:from="form.createDateFrom" v-model:to="form.createDateTo" :time="false" />
        </a-space>
      </a-space>
    </a-space>
    <ChangeList v-model:form="form" :records :loading :pagination @refresh="search" />
  </ProPage>
</template>

<style lang="less" scoped>
.label {
  display: inline-block;
  width: 60px;
  text-align: right;
  flex-shrink: 0;
  margin-right: 10px;
}
.tooltip-content {
  padding: 10px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
</style>
